<template>
  <div class="product">
    <van-tabs
      v-model="active"
      line-width="0px"
     animated
    >
      <van-tab
        v-for="(item,index) in shouju"
        :key="index"
        line-width
   
      >
        <template #title>
          <span class="span1">{{item.title}}</span>

        </template>
        <jptj :id="item.id"></jptj>
      </van-tab>

    </van-tabs>


    
  </div>
</template>
<script>
import jptj from "./Home/jptj.vue"
export default {
  data() {
    return {
      shouju: [
        {
          id: 1,
          title: "精品推荐",
          title2: '多买多省'
        },
        {
          id: 2,
          title: "热门榜单",
          title2: '热门榜单'
        },
        {
          id: 3,
          title: "首发新品",
          title2: 'CRMEB'
        },
        {
          id: 4,
          title: "促销单品",
          title2: '新品首发'
        },
      ],
      active: 1,
      color:"red"
    }

  },
  components: {
    jptj
  }
}
</script>
<style lang="scss" scoped>
.span1:hover{
  font-size: 16px;
color: red;
}
</style>